<template>
	<div>
		<el-table :data="tableData" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%" @sort-change="sortChange" @selection-change="selectItem">
			<!-- 表格主体 -->
			<template v-for="i in config.show.items.length">
				<el-table-column :sortable="config.sort[config.show.prop[i-1]]" :label="config.show.items[i-1]" :prop="config.show.prop[i-1]" :width="config.show.width[i-1]"></el-table-column>
			</template>
			<el-table-column label="操作" v-if="config.operate" :width="config.operate.width">
				<template slot-scope="scope">
					<el-button v-if="config.operate.sendOff" @click="sendOff(scope.row)" type="text" size="small">寄出</el-button>
					<el-button v-if="config.operate.printFace" @click="goJiJianDetail(scope.row)" type="text" size="small">重新打印面单</el-button>
					<el-button v-if="config.operate.deleteBtn" @click="deleteBtn(scope.row)" type="text" size="small">删除</el-button>
					
					<el-button v-if="config.operate.detail" @click="checkDetail(scope.row)" type="text" size="small">详情</el-button>
					<el-button v-if="config.operate.makeReceive" @click="signIn(scope.row)" type="text" size="small">签收</el-button>
					<el-button v-if="config.operate.sendMessage" @click="sendMessage(scope.row)" type="text" size="small">发送短信</el-button>
					<el-button v-if="config.operate.edit" @click="modify(scope.row)" type="text" size="small">修改</el-button>
					<el-button v-if="config.operate.returnBack" @click="returnPackage(scope.row)" type="text" size="small">退回</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 编辑 -->
		<el-dialog :title="Edit.config.title" :visible.sync="Edit.dialogFormVisible">
			<el-form ref="form" :model="Edit.data.form" :rules="Edit.config.rules" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.select">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.multipleSelect">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200" multiple>
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.input">
					<el-input v-model.trim="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="h-40 w-200" :maxlength="255"></el-input>
				</el-form-item>
				<!-- 图片上传 -->
				<el-form-item :label="this.Edit.config.form.uploadImg.label" v-if="this.Edit.config.form.uploadImg">
					<el-upload name='files[0]' class="avatar-uploader" :action="Edit.config.uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="Edit.data.form[this.Edit.config.form.uploadImg.prop]" :src="Edit.data.form[this.Edit.config.form.uploadImg.prop]" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Edit.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitEdit()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 退回 -->
		<el-dialog :title="return_title" :visible.sync="return_package_show">
			<el-form ref="form" :model="return_form" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="return_form.label" :prop="return_form.prop">
					<el-select v-model="return_form.reason" :placeholder="return_form.placeholder" class="w-200">
						<el-option v-for="option in selectData" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="return_package_show = false">取 消</el-button>
				<el-button type="primary" @click="commitReturn()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//	import http from 'assets/js/http'
	export default {
		props: ['exchanged', 'tableData', 'config', 'baseApi', 'Edit'],
		data() {
			return {
				return_package_show: false,
				return_title: '退回快递公司',
				return_form: {
					prop: 'reason',
					label: '退回原因',
					reason: '',
					placeholder: '请选择原因'
				},
				selectData: [{
						label: '买错了',
						value: 1
					},
					{
						label: '换件',
						value: 2
					}
				]
			}
		},
		methods: {
			sendOff(row) {
				
			},
			checkDetail(row) {
				this.$router.push({ name: 'kucunDetail', query: {id: 1}})
			},
			signIn(row) {
				if('还有包裹') {
					this.$confirm('该用户还有3个待出库包裹', '', {
						confirmButtonText: '点击查看',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '去查看页面！'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
				} else {
					this.$message({
						type: 'success',
						message: '该包裹签收成功!'
					});
				}
			},
			sendMessage(row) {
				this.$confirm('此操作将给用户发送消息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '发送成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			modify(row) {
				console.log('row', row)
				this.Edit.data.form.express_number = row.express_number;
				this.Edit.data.form.pickup_code = row.pickup_code;
				this.Edit.data.form.iphone = row.iphone;
				this.Edit.data.form.express_company = row.express_company;
				this.Edit.dialogFormVisible = true;
			},
			commitEdit() {
				console.log('this.Edit.data.form', this.Edit.data.form)
			},
			commitReturn() {

			},
			returnPackage(row) {
				this.return_package_show = true;
			},
			goJiJianDetail() {
				this.$router.push({name: 'jijianDetail', query: {a: 1}})
			},
			deleteBtn() {
				this.$confirm('此操作将删除该包裹信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功！'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			sortChange(column) {},
			selectItem(val) {},
			confirmDelete(item) {},
			edit(row) {},
			dateFormat(row) {},
			handleAvatarSuccess(res, file) {},
			beforeAvatarUpload(file) {}

		},
		created() {},
		//		mixins: [http]
	}
</script>

<style>
	.demo-table-expand {
		font-size: 0;
	}
	
	.demo-table-expand label {
		color: #99a9bf;
	}
	
	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
	
	.el-table--border {
		border-radius: 6px;
	}
	
	.el-table th {
		background: rgba(250, 250, 250, 1);
	}
	
	.operate_btn_wrap {
		line-height: 32px;
	}
</style>